import { Button, Input, Image, Popconfirm, Form } from "antd";
import {
  FieldTimeOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import CommonPage from "@/components/page/CommonPage";
import Add from "@/components/svg/action-slot-icon/Add";
import styled from "styled-components";
import DeleteTwo from "@/components/svg/action-slot-icon/Delete_Two";
import CrudTable from "@/components/table/CrudTable";
import QueryBarItem from "@/components/query-bar/QueryBarItem";
import useCRUD from "@/hooks/useCRUD";
import { deleteLinks, getLinks, saveOrUpdateLink } from "@/api/link";
import { useEffect, useRef } from "react";
import useGetState from "@/hooks/useGetState";
import { convertImgUrl } from "@/utils/MyFun";
import { formatDate } from "@/utils/common/common";
import CrudModal from "@/components/table/CrudModal";

const Styled = styled.div``;

const Link = () => {
  const $table = useRef();
  const {
    modalVisible,
    setModalVisible,
    modalTitle,
    modalLoading,
    setModalLoading,
    handleAdd,
    handleDelete,
    handleEdit,
    handleSave,
    modalForm,
    setModalForm,
    modalFormRef,
    tableSelections,
    setTableSelections,
    clearFormFields,
  } = useCRUD({
    name: "友链",
    initForm: {},
    doCreate: saveOrUpdateLink,
    doDelete: deleteLinks,
    doUpdate: saveOrUpdateLink,
    refresh: () => $table.current.handleSearch(),
  });
  const [queryItems, setQueryItems, getQueryItems] = useGetState({});

  const columns = [
    {
      title: "头像",
      key: "avatar",
      dataIndex: "avatar",
      width: 150,
      align: "center",
      render: (text, record, index) => {
        return (
          <Image
            style={{ height: "150px", borderRadius: "3px" }}
            src={convertImgUrl(record.avatar)}
            fallback="http://dummyimage.com/400x400"
          />
        );
      },
    },
    {
      title: "链接名",
      key: "name",
      width: 100,
      align: "center",
      render(text, record) {
        return <span>{record.name}</span>;
      },
    },
    {
      title: "链接地址",
      key: "address",
      width: 120,
      align: "center",
      ellipsis: true,
      render(text, record, index) {
        return (
          <Button type="link" size="small" style={{ color: "#333" }}>
            {record.address}
          </Button>
        );
      },
    },
    {
      title: "链接介绍",
      key: "intro",
      width: 120,
      align: "center",
      render(text, record) {
        return <span>{record.intro}</span>;
      },
    },
    {
      title: "创建日期",
      key: "created_at",
      width: 80,
      align: "center",
      render(text, record, index) {
        return (
          <Button
            type="link"
            icon={<FieldTimeOutlined />}
            size="small"
            style={{ color: "#333" }}
          >
            {formatDate(record.created_at)}
          </Button>
        );
      },
    },
    {
      title: "操作",
      key: "actions",
      width: 100,
      align: "center",
      fixed: "right",
      render: (text, record, index) => {
        return (
          <>
            <Button
              type="primary"
              icon={<EditOutlined />}
              style={{
                marginRight: "5px",
                backgroundColor: "gold",
              }}
              onClick={async () => {
                handleEdit(record);
              }}
            >
              编辑
            </Button>
            <Popconfirm
              title="确认删除该友链吗"
              onConfirm={() => {
                handleDelete([record.id]);
              }}
              okText="确认"
              cancelText="取消"
            >
              <Button
                type="primary"
                icon={<DeleteOutlined />}
                style={{ backgroundColor: "#D03050FF" }}
              >
                删除
              </Button>
            </Popconfirm>
          </>
        );
      },
    },
  ];

  function updateQueryItems(newQueryItems) {
    console.log("更新query", newQueryItems);
    setQueryItems(newQueryItems);
  }
  useEffect(() => {
    $table.current.handleSearch();
  }, []);

  return (
    <Styled>
      <CommonPage title="友链管理">
        <div className="action-slot" slot="action">
          <Button type="primary" icon={<Add />} onClick={handleAdd}>
            新增友链
          </Button>
          <Button
            type="primary"
            icon={<DeleteTwo />}
            danger
            onClick={() => {
              handleDelete(tableSelections);
            }}
          >
            批量删除
          </Button>
        </div>
        <CrudTable
          ref={$table}
          columns={columns}
          queryItems={queryItems}
          updateQueryItems={updateQueryItems}
          getQueryItems={getQueryItems}
          getData={getLinks}
          setTableSelections={setTableSelections}
        >
          <div className="queryBar-slot flex label-ml-15" slot="queryBar">
            <QueryBarItem label="友链名" labelWidth={50}>
              <Input placeholder="请输入友链名" />
            </QueryBarItem>
          </div>
        </CrudTable>

        <CrudModal
          visible={modalVisible}
          setModalVisible={setModalVisible}
          loading={modalLoading}
          title={modalTitle}
          handleSave={handleSave}
          clearFormFields={clearFormFields}
        >
          <Form
            form={modalFormRef}
            name="friend_link"
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 20,
            }}
            initialValues={{ ...modalForm }}
          >
            <Form.Item
              label="链接名"
              name="name"
              rules={[{ required: true, message: "请输入友链名" }]}
              validateTrigger={["onBlur", "onChange"]}
            >
              <Input
                placeholder="请输入友链名"
                onChange={(e) => {
                  modalFormRef.setFieldValue("name", e.target.value);
                }}
              />
            </Form.Item>
            <Form.Item
              label="链接头像"
              name="avatar"
              rules={[{ required: true, message: "请输入链接头像" }]}
              validateTrigger={["onBlur", "onChange"]}
            >
              <Input
                placeholder="请输入链接头像"
                onChange={(e) => {
                  modalFormRef.setFieldValue("avatar", e.target.value);
                }}
              />
            </Form.Item>
            <Form.Item
              label="链接地址"
              name="address"
              rules={[{ required: true, message: "请输入链接地址" }]}
              validateTrigger={["onBlur", "onChange"]}
            >
              <Input
                placeholder="请输入链接地址"
                onChange={(e) => {
                  modalFormRef.setFieldValue("address", e.target.value);
                }}
              />
            </Form.Item>
            <Form.Item
              label="链接介绍"
              name="intro"
              rules={[{ required: true, message: "请输入链接介绍" }]}
              validateTrigger={["onBlur", "onChange"]}
            >
              <Input
                placeholder="请输入链接介绍"
                onChange={(e) => {
                  modalFormRef.setFieldValue("intro", e.target.value);
                }}
              />
            </Form.Item>
          </Form>
        </CrudModal>
      </CommonPage>
    </Styled>
  );
};

export default Link;
